<style lang="scss" src="./style/index.scss"></style>
<template>
    <div class="login-page" :style="loginPageStyle">
        <div class="login-page-inner"></div>
        <div class="login-page-header">
            <div cw-role="cell" cw-valign="middle" class="container">
                <div class="navbar-header">
                    <a href="#" class="logo" cw-layout="fit" cw-role="cell" cw-align="center">Cloud Whale</a>
                </div>
            </div>
        </div>
        <div class="login-box" cw-role="cell" cw-align="center" cw-valign="middle">
            <div class="login-form">
                <h1>登录</h1>
                <el-form ref="form" :model="form" size="large" @submit.native.prevent="login">
                    <el-form-item>
                        <el-input autofocus placeholder="请输入账号" v-model="form.username">
                            <i slot="prefix" class="ion ion-person"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" placeholder="请输入密码" v-model="form.password">
                            <i slot="prefix" class="ion ion-locked"></i>
                        </el-input>
                    </el-form-item>
                    <div cw-role="cell" cw-align="center">
                        <el-button type="primary" class="login-submit" native-type="submit">立即登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="login-page-footer">
            <div cw-role="cell" cw-valign="middle" cw-align="center" class="container">
                <span>© 2017</span>
                <a href="http://cloud-whale.com" target="_blank" title="访问云鲸网络Cloud Whale" class="margin-l-15 margin-r-15">云鲸网络 Cloud Whale</a>
                <span>提供技术支持</span>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import {
    Form,
    FormItem,
    Input,
    Button
} from 'element-ui';

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Button);

export default {
    name: 'Login',
    data() {
        return {
            loginPageStyle: {
                'background-image': 'url(' + require('../assets/images/login-bg.jpg') + ')',
                'background-size': 'cover'
            },
            form: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        login() {
            console.log(this.form);
            this.whaleXHR.GET('/admin/login', { params: this.form })
                .then((res) => {
                    if (res.code === 'success') {
                        this.$router.push('/');
                    }
                });
        }
    }
};

</script>
